<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div id="left" class="grid-content bg-purple">
        <div class="couplet_left">
          <div class="left_title">
            <p class="left_circle_font">瞧一瞧,看一看啦</p>
            <h4><span style="color: #409EFF" class="iconfont icon-huodongyonglaba"></span></h4>
            <p>为系统而生,为框架而死，为debug奋斗一辈子！</p>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8" style="background-color: rgba(0,0,0,0)">
      <div class="grid-content bg-purple" style="background-color: rgb(244, 244, 245);border: 1px solid #FFFFFF">
        <div >
          <!--<div>-->
          <!--<img src="../assets/roarGirl.gif" alt="咆哮少女">-->
          <!--</div>-->
          <div class="center_title">
            <h4><span class="iconfont icon-shizi" style="color: #A040FF;font-size: 40px"></span></h4>
            <p> 我为code狂</p>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div  id="right" class="grid-content bg-purple">
        <div>
          <div class="right_title">
              <p class="right_circle_font" >瞧一瞧,看一看啦</p>
            <h4><span style=" color: #409EFF" class="iconfont icon-horn"></span></h4>
            <p>吃符号的亏，上大小写的当，最后死在需求上！</p>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'couplet'
  }
</script>

<style scoped>
  /**

下联：吃符号的亏，上大小写的当，最后死在需求上！
横批：杯具程序员！
*/

  /*---上联---*/
  #left{
    margin-left: 5%;
    /*background-color: rgba(0,0,0,0.1);*/
    background: rgb(198, 226, 255);
  }

  .left_title{
    border-radius: 20px;
    /*background-color: hotpink;*/
    padding: 10px;
    position: relative;
    height: 50px;
    overflow: hidden;
  }
  .left_title h4{
    position: absolute;
    left: 0;
    margin-left: 5%;

  }
  .left_title p{
    width: 100%;
    margin-top: 30px;
    line-height: 100%;
    text-align: left;
    font-size: 18px;
  }

  .left_title .left_circle_font{


    animation-name: floatTowardRight;
    animation-duration: 7s;
    animation-timing-function: linear;
    /*animation-delay: 1s;*/
    animation-iteration-count: infinite;



  }
  /*---上联end------*/
  /*---横批--- start--------*/

  .center_title{
    padding: 10px;
    border-radius: 20px;
    height: 50px;
    position: relative;
    background-color: transparent;


    /*border-image-slic ;*/
  }
  .center_title h4{
    position: absolute;
    margin-left: 45%;
    top: 0;

  }
  .center_title p{
    width: 100%;
    height: 100%;
    line-height: 100%;
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
  }
  /*---------横批--end----*/
  /*----下联-----*/
  #right{
    margin-right: 5%;
    background: rgb(198, 226, 255);
  }
  .right_title{
    border-radius: 20px;
    padding: 10px;
    position: relative;
    overflow: hidden;
  }

  .right_title h4{
    position:  absolute;
    right: 0;
    margin-right: 5%;

  }
  .right_title p{
    width: 100%;
    height: 100%;
    line-height: 100%;
    text-align: right;
    margin-top: 30px;
    font-size: 18px;
  }
  .right_title .right_circle_font{
    animation-name: floatTowardLeft;
    animation-duration: 7s;
    animation-timing-function: linear;
    /*animation-delay: 1s;*/
    animation-iteration-count: infinite;


  }

  /*----下联--end----*/


  /*----------------*/
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }



</style>
